const config = require('./config');
const del = require('del');
const gulp = require('gulp');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const cache = require('gulp-cache');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const gulpif = require('gulp-if');
const uglify = require('gulp-uglify');
const useref = require('gulp-useref');
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
// server
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;


// NODE_ENV
const env = process.env.NODE_ENV || 'development';
const condition = env === 'production';

/**
 * 处理html
 */
gulp.task('html', () => {
    return gulp.src('src/**/*.html')
        .pipe(gulpif(condition, htmlmin({
            removeComments: true,
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true
        })))
        .pipe(gulp.dest('dest/'))
});

/**
 * 处理css 使用scss
 */
gulp.task('css', () => {
    return gulp.src('src/styles/scss/**/*.scss')
        .pipe(sass())
        .pipe(gulpif(condition, cleanCSS()))
        .pipe(gulp.dest('dest/css'))
});

/**
 * 压缩javascript
 */
gulp.task('js', () => {
    return gulp.src('src/js/**/*.js')
        .pipe(gulpif(condition, babel()))
        .pipe(gulpif(condition, uglify()))
        .pipe(gulp.dest('dest/js'))
});


/**
 * 删除旧文件
 */
gulp.task('clear:dest', () => {
    return del('dest');
});

/**
 * 压缩图片
 */
gulp.task('images', () => {
    return gulp.src('src/common/images/**/*.{png,jpg,gif,svg}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dest/common/images'))
});


gulp.task('common', () => {
    return gulp.src(['src/common/**/*', '!src/common/images/**/*'])
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dest/common/'))
});


// gulp.task('minFs', () => {
//     return gulp.src('dest/*.html')
//         .pipe(useref())
//         .pipe(gulpif(' *.js ', uglify()))
//         .pipe(gulpif(' *.css ', cleanCSS()))
//         .pipe(gulp.dest('dest/'));
// })

gulp.task('watchs', () => {
    browserSync.init(config.server);
    gulp.watch('src/**/*.html', gulp.series('html')).on('change', event => {
        reload();
    });

    gulp.watch('src/styles/scss/**/*.scss', gulp.series('css')).on('change', event => {
        reload();
    })

    gulp.watch('src/js/**/*.js', gulp.series('js')).on('change', event => {
        reload();
    })

    gulp.watch('src/common/images/**/*', gulp.series('images')).on('change', event => {
        reload();
    })

    gulp.watch(['src/common/**/*', '!src/common/images/**/*'], gulp.series('common')).on('change', event => {
        reload();
    })
});

gulp.task('init', gulp.series('clear:dest', 'html', 'css', 'js', 'images', 'common'));
gulp.task('server', gulp.series('init', 'watchs'));
gulp.task('build', gulp.series('init'));